<template>
  <div>
    <el-button type="primary" icon="el-icon-plus" @click="showDialogAction(null)" style="margin: 10px 0">新增 </el-button>
    <el-button type="primary" icon="el-icon-search" @click="searchAction" style="margin: 10px 10px">查询 </el-button>

    <el-table border="border"
              v-loading="loading"
              :data="tableData" style="width: 100%">
      <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>

      <el-table-column align="center" prop="avatar" label="头像" width="180">
        <template slot-scope="{row,$index}">
          <el-image
            style="width: 50px; height: 50px"
            :src="row.avatar"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="60"></el-table-column>
       <el-table-column prop="phone" label="电话" width="100"></el-table-column>
      <el-table-column prop="nickName" label="昵称" width="140"></el-table-column>
      <el-table-column prop="totalConsumption" label="累计消费" width="70"></el-table-column>
      <el-table-column prop="balance" label="余额" width="70"></el-table-column>
      <el-table-column prop="points" label="积分" width="70"></el-table-column>
      <el-table-column prop="lastConsumeTime" label="最后消费时间" width="140"></el-table-column>
<!--      <el-table-column prop="type" label="类型" width="120">-->
<!--        <template slot-scope="scope">-->
<!--          <el-tag :type="enumFormat(scope.row.memberLevel.color">{{ enumFormat(scope.row.memberLevel).label }}</el-tag>-->
<!--        </template>-->
<!--      </el-table-column>-->
       <el-table-column prop="createTime" label="创建时间" width="140"></el-table-column>

      <el-table-column prop="prop" label="操作" align="center" fixed="right" width="120">
        <template slot-scope="{row,$index}">
          <el-button @click="showDialogAction(row)" type="primary" icon="el-icon-edit" circle></el-button>
          <el-button @click="delAction(row)" type="danger" icon="el-icon-delete" circle></el-button>
        </template>
      </el-table-column>

    </el-table>
    <!--    current-page 当前页-->
    <el-pagination
      style="margin-top: 20px;text-align: center"
      @current-change="handleCurrentChange"
      :current-page.sync="pageDto.pageNum"
      :page-size="pageDto.pageSize"
      :page-count="7"
      background
      layout="total, prev, pager, next,jumper"
      :total="total"
    >
    </el-pagination>

  </div>
</template>

<script>
import * as api from './api'
import {MEMBER_LEVEL} from "@/utils/enum-data";

export default {
  name: 'memberInfo',
  data() {
    return {
      title: '新增',
      pageDto: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      tableData: [],
      loading: false,
      dialogFormVisible: false,
      form: {
      }
    }
  },
  // 组件加载完毕发出请求
  mounted() {
    this.pageAction()
  },
  methods: {
    //点击切换页码
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageDto.pageNum = val
      this.pageAction()
    },
    //加载分页
    async pageAction() {
      this.loading = true;
      await this.$sleep(500);
      let result = await api.pageRequest(this.pageDto)
      this.tableData = result.data.list
      this.total = result.data.total
      this.loading = false;
    },
    enumFormat(val) {
      // let itemTemp = {}
      // this.$GlobalStatus.MEMBER_LEVEL.forEach(item => {
      //   if (item.type === val) {
      //     itemTemp = item
      //   }
      // })
      // return itemTemp
    }

  }
}


</script>

<style>

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
